<button class="Btn">
  <svg class="svgIcon" viewBox="0 0 512 512" height="1.2em"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
  Messages
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, message, hover effect */
.Btn {
  width: 180px;
  height: 45px;
  border-radius: 40px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  background: linear-gradient( to right,#44ea76, #39fad7);
  transition-duration: .3s;
  letter-spacing: 1.4px;
}

.svgIcon path {
  fill: white;
}

.Btn:hover {
  transform: scale(0.95);
  transition-duration: .3s;
}

.Btn::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 30%;
  background: linear-gradient( to right,#44ea76, #39fad7);
  filter: blur(10px);
  bottom: -3px;
  z-index: -1;
  transition-duration: .3s;
}

.Btn:hover::before {
  bottom: -1px;
  filter: blur(5px);
  transition-duration: .3s;
}
</style>
